<template>
  <el-popover placement="bottom" :width="280" trigger="hover" :popper-options="{ height: '300px' }">
    <template #reference>
      <div class="bell-icon-container">
        <el-badge :value="3">
          <el-icon><Bell /></el-icon>
        </el-badge>
      </div>
    </template>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="通知" name="first">
        <el-row>
          <el-col :span="24" class="center-content"><div class="grid-content ep-bg-purple-dark">Content 1</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="center-content"><div class="grid-content ep-bg-purple-dark">Content 2</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="center-content"><div class="grid-content ep-bg-purple-dark">Content 3</div></el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="邮件" name="second">
        <el-row>
          <el-col :span="24" class="center-content"><div class="grid-content ep-bg-purple-dark">Content 1</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="center-content"><div class="grid-content ep-bg-purple-dark">Content 2</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="center-content"><div class="grid-content ep-bg-purple-dark">Content 3</div></el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <el-row>
      <el-col :span="24"><el-divider /></el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="center-content">
        <el-button class="bottom-button" @click="clearMessages">
          <el-icon class="circleClose-icon"><CircleClose /></el-icon>
          <span class="clear-text">清空消息</span>
        </el-button>
      </el-col>
    </el-row>
  </el-popover>
</template>

<script setup>
import { ref } from 'vue'
import { Bell, CircleClose } from '@element-plus/icons-vue'

//气泡数据
const badgeCount = ref(3) // 默认显示数字为3

const activeName = ref('first')
const handleClick = (tab) => {
  // 处理 tab 点击事件
  console.log('Tab clicked:', tab.name)
}
const showUnderline = ref(false)
const messages = ref([
  // 初始消息数据
  // ...
])
const clearMessages = () => {
  // 清空消息的操作，包括更新底层数据和相关内容
  messages.value = []
  showUnderline.value = false
  console.log('Messages cleared!')
}
</script>
<style scoped>
.bell-icon-container {
  cursor: pointer;
}
.el-row {
  margin-bottom: 5px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  color: white;
  width: 90%;
}

.ep-bg-purple-dark {
  background-color: #9bd3d4;
}

.line-divider {
  border-top: 1px solid #ccc; /* 设置横线颜色和样式 */
  margin: 10px 0; /* 设置横线的上下边距， */
}

.circleClose-icon {
  size: 8px;
  color: #1890ff;
}

.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottom-button {
  margin: auto;
  border: none;
  padding: 0;
  margin: 0;
  background-color: transparent;
  display: flex;

  height: 100%;
}

/* 去除按钮激活时的背景色 */
.bottom-button:focus,
.bottom-button:hover {
  background-color: transparent !important;
}

:deep(.el-tabs__content) {
  height: 200px;
}
:deep(.el-badge__content) {
  border: 0;
  background-color: #ff4d4f;
}
</style>
